<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body {
			height: 200vh;
		}
		.tou {
			position: fixed;
			top: 0;
			left: 0;
			padding: 25px 100px;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			transition: 0.5s;
		}
		.logo {
			position: relative;
			font-size: 22px;
			font-weight: 900;
			letter-spacing: 1px;
			color: rgb(28, 36, 148);
		}
		.logo::before {
			content: '';
			position: absolute;
			left: -50px;
			top: 7px;
			
			width: 50px;
			height: 18px;
			background-image: url("logo.png");
			background-size: 100%;
			vertical-align: center;
			align-items: center;
			overflow: hidden;
		}
		.biao {
			position: relative;
			display: flex;
			justify-content: center;
			align-content: center;
			list-style: none;
		}
		.biao li {
			position: relative;
		}
		.biao a {
			position: relative;
			margin: 0 10px;
			font-size: 18px;
			font-family: 'fangsong';
			font-weight: bold;
			color: rgb(28, 36, 148);
			text-decoration: none;
			
		}
		.bian {
			padding: 15px 100px;
			background-color: rgb(71, 105, 219);
		}
		.bian .logo, .tou.bian a {
			color: rgb(252, 247, 247);
		}
		/*  背景图样式 */
		.bjimg {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			min-width: 1000px;
			z-index: -10;
			zoom: 1;
			background-color: #fff;
			background-image: url("bg.jpg");
			background-repeat: no-repeat;
			background-size: cover;
			-webkit-background-size: cover;
			-o-background-size: cover;
			background-position: center 0;
		}
	</style>
</head>
<body>
	<!-- 背景图 -->
	<div class="bjimg"></div>
	
	<!--  导航栏 -->
	<div class="tou">
		<sapn class="logo"> 北极光</sapn>
		<ul class="biao">
			<li><a href="#"><a href="#">主页</a></li>
			<li><a href="#">个人简介</a></li>
			<li><a href="#">文章</a></li>
			<li><a href="#">留言版</a></li>
			<li><a href="#">友链</a></li>
		</ul>
	</div>
	<script>
		// window.addEventListener('scroll', function () {
		// 	let tou = document.querySelector('.tou');
		//
		//
		// 	/*  tou.classList.toggle("bian",window.scrollY>0); */
		// 	if ( window.scrollY > 0 ) {
		// 		tou.classList.add("bian");
		// 	} else {
		// 		tou.classList.remove("bian");
		// 	}
		// });
		
		
		window.addEventListener('scroll', function () {
			let tou = document.querySelector('.tou');
			tou.classList.toggle("bian", window.scrollY > 0);
		})
	</script>
</body>
</html>
